<template>
    <div class="photo">
        <c-title text="相册"></c-title>
        <div class="box">
            <span :class="{ 'current': current_index == 0 }" @click="show_all">全部({{ photo_list.length }})</span>
            <span v-for="(item, index) in brand_pic_tag_list" :class="{ 'current': current_index == index + 1 }"
                @click="change(item, index)">{{ item.tag }}</span>
        </div>
        <div class="wrapper">
            <img v-for="(item, index) in show_photo" @click="show_preview(index)" :key="index" :src="item" />
        </div>
    </div>
</template>

<script>

import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            current_index: 0,
            brand_pic_tag_list: [],
            photo_list: [],
            show_photo: [],
        };
    },
    activated() {
        this.getDetail();
    },
    methods: {
        show_preview(index) {
            ImagePreview({
                images: this.show_photo,
                startPosition: index
            })

        },
        show_all() {
            this.current_index = 0;
            this.show_photo = this.photo_list
        },
        change(data, index) {
            this.current_index = index + 1;
            console.log(data, 'index', index);
            let show_photo = [];
            data.pics.forEach(item=>{
                show_photo.push(item.image_url)
            })
            this.show_photo = show_photo;
        },
        async getDetail() {
            let json = { id: this.$route.params.store_id * 1 };
            let { result, msg, data } = await $http.post("plugin.local-life.api.store.info", json, '')
            if (result) {
                let photo_list = []
                data.has_one_brand.brand_pic_tag_list.forEach(item => {
                    if (item.pics.lenth !== 0) {
                        item.pics.forEach(c_item => {
                            photo_list.push(c_item.image_url);
                        })
                    }
                })
                let brand_pic_list = [];
                if (data.has_one_brand.brand_pic_list.length !== 0) {
                    data.has_one_brand.brand_pic_list.forEach(item => {
                        brand_pic_list.push(item.image_url);
                    })
                }
                this.photo_list = photo_list.concat(brand_pic_list);
                this.show_photo = photo_list.concat(brand_pic_list);

                this.brand_pic_tag_list = data.has_one_brand.brand_pic_tag_list;
            } else {
                this.$toast(msg);
            }
        },
    }
};
</script>

<style scoped lang='scss'>
.photo {
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        img {
            width: 10.7188rem;
            height: fit-content;
            margin: 0;
            margin-top: .5rem;
            border-radius: .5rem;
            margin-right: .5rem;
            margin-left: 0.5rem;
        }

        img:nth-child(2n) {
            margin-right: 0;
        }

    }

    .box {
        display: flex;
        padding: .7813rem;

        span {
            min-width: 4.125rem;
            height: 1.4375rem;
            display: flex;
            align-items: center;
            color: #6E6E79;
            font-weight: 500;
            font-size: .8125rem;
            justify-content: center;
            margin-right: .375rem;
            background: #FFFFFF;
            border-radius: .3125rem;
        }

        .current {
            color: #FFFFFF !important;
            background-color: var(--themeBaseColor) !important;
        }
    }
}
</style>